<template>
  <vxe-modal
    resize
    esc-closable
    width="40%"
    height="65%"
    showFooter
    v-model="formVisible"
    @hide="formClose"
    :loading="formLoading"
  >
    <template slot="title">
      <span>定时任务表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <!-- 主体 -->
        <vxe-form
          ref="firstForm"
          title-width="120"
          title-align="right"
          :data="formEntity"
          :rules="rules"
          span="24"
        >
          <vxe-form-item title="任务名称" field="B_JobName">
            <el-input v-model="formEntity.B_JobName" placeholder="请输入" clearable></el-input>
          </vxe-form-item>
          <vxe-form-item title="CRON表达式" field="B_Cron">
            <input-cron type="text" v-model="formEntity.B_Cron" placeholder="请输入cron表达式" />
          </vxe-form-item>
          <vxe-form-item title="任务地址" field="B_JobCall">
            <el-select
              clearable
              filterable
              collapse-tags
              placeholder="请选择"
              v-model="formEntity.B_JobCall"
            >
              <el-option
                v-for="item in jobCalls"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.des }}</span>
              </el-option>
            </el-select>
          </vxe-form-item>
          <vxe-form-item title="执行终端" field="B_JobTerminal">
            <rayd-select options="JobTerminal" v-model="formEntity.B_JobTerminal"></rayd-select>
          </vxe-form-item>
          <vxe-form-item title="备注" field="B_Remark">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              maxlength="50"
              show-word-limit
              placeholder="请输入"
              clearable
              v-model="formEntity.B_Remark"
            ></el-input>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" v-form-validate="formSubmit">保存</el-button>
      <el-button @click="formVisible=false">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import { Job } from "@/api";
import InputCron from "@/components/easy-cron/input-cron";
export default {
  components: { InputCron },
  props: {},
  data() {
    return {
      //表单可见
      formVisible: false,
      //表单加载中
      formLoading: false,
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        B_JobName: [{ required: true, message: "请输入任务名称!" }],
        B_Cron: [{ required: true, message: "请输入CRON表达式!" }],
        B_JobCall: [{ required: true, message: "请选择任务地址!" }],
        B_JobTerminal: [{ required: true, message: "请选择执行终端!" }],
      },
      /* 实体数据 */
      jobCalls: [], //任务地址
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      //初始化任务地址
      Job.QueryLocalJobCalls().then((res) => {
        this.jobCalls = res;
      });
    },
    //表单开启
    formOpen(row) {
      if (!row) {
        //新增
      } else {
        //编辑
        this.formEntity = JSON.parse(JSON.stringify(row));
      }
      //打开表单
      this.formVisible = true;
    },
    //表单提交
    formSubmit() {
          //验证通过
          Job.Save(this.formEntity).then((res) => {
            this.formVisible = false; //关闭弹窗
            this.$emit("refresh"); //刷新表格
          });
    },
    //表单关闭
    formClose() {
      //清除表单验证
      this.util.formClearValid(this.formArr);
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    },
  },
};
</script>
